<template>
  <div class="other-macro-def">
    <WmcCard title="其他宏定义">
      <template #optbtn>
        <el-button
          class="button"
          :link="true"
          type="primary"
          @click="openDialog"
          >添加</el-button
        >
      </template>
      <el-table :data="otherMacroDef" border style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column label="宏定义" prop="name"> </el-table-column>
        <el-table-column label="替换值">
          <template #default="scope">
            ({{ scope.row.dataType.name }}){{ scope.row.value }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <div class="handle-btns">
              <el-button
                :icon="Edit"
                size="small"
                type="primary"
                link
                @click="updateOtherMacroDef(scope.row, scope.$index)"
              >
                编辑
              </el-button>
              <el-button
                :icon="Delete"
                size="small"
                type="primary"
                link
                @click="removeOtherMacroDef(scope.row, scope.$index)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </WmcCard>

    <WmcDialog
      title="添加宏定义"
      :dialogVisible="dialogVisible"
      width="500px"
      @close="closeDialog"
      @handleConfirm="handleConfirm"
    >
      <template #form>
        <el-form
          :model="addOtherMacroDef"
          ref="addOtherMacroDefRef"
          label-width="100px"
        >
          <el-form-item label="标识符：" prop="name">
            <el-input v-model="addOtherMacroDef.name"></el-input>
          </el-form-item>
          <el-form-item label="替换值：">
            <el-col :span="15">
              <el-form-item prop="dataType">
                <el-select
                  v-model="addOtherMacroDef.dataType.name"
                  placeholder=""
                >
                  <el-option
                    v-for="item in dataType"
                    :key="item.value"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1"> - </el-col>
            <el-col :span="8">
              <el-form-item prop="value">
                <el-input v-model="addOtherMacroDef.value"></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-form>
      </template>
    </WmcDialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch } from 'vue'
import WmcCard from '@/render/base-ui/card'
import { IConfigData } from '@/render/store/drives/types'
import { otherMacroDefConfig } from '../config/other-macro-def.config'
import { addOtherMacroDefConfig } from '../config/add-other-macro-def.config'
import { Edit, Delete } from '@element-plus/icons-vue'
import WmcDialog from '@/render/base-ui/dialog'
import emitter from '@/render/utils/mitt'

export default defineComponent({
  components: {
    WmcCard,
    WmcDialog
  },
  props: {
    modelValue: {
      type: Array as PropType<IConfigData[]>,
      default: () => []
    },
    dataTypeList: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    let rowIndex = -1
    const otherMacroDef = ref(props.modelValue)
    const dialogVisible = ref(false)
    const addOtherMacroDefDefault = {
      name: '',
      dataType: {
        name: '',
        isNew: true,
        value: '',
        type: ''
      },
      value: ''
    }
    const addOtherMacroDef = ref()
    const addOtherMacroDefRef = ref()
    const dataType = props.dataTypeList.map((item: any) => {
      return {
        label: item.name,
        value: item.value
      }
    })

    const updateOtherMacroDef = (item: any, index: number) => {
      addOtherMacroDef.value = JSON.parse(JSON.stringify(item))
      dialogVisible.value = true
      rowIndex = index
    }

    const removeOtherMacroDef = (item: IConfigData, index: number) => {
      if (index !== -1) {
        otherMacroDef.value.splice(index, 1)
      }
    }

    const openDialog = () => {
      dialogVisible.value = true
      addOtherMacroDef.value = JSON.parse(
        JSON.stringify(addOtherMacroDefDefault)
      )
      rowIndex = -1
    }

    const closeDialog = () => {
      dialogVisible.value = false
    }

    const handleConfirm = () => {
      dialogVisible.value = false
      if (rowIndex === -1) {
        otherMacroDef.value.push(addOtherMacroDef.value)
      } else {
        otherMacroDef.value[rowIndex] = JSON.parse(
          JSON.stringify(addOtherMacroDef.value)
        )
      }
    }

    watch(
      otherMacroDef,
      (n) => {
        emit('update:modelValue', n)
        emitter.emit('update-tab', 'emitter')
      },
      {
        deep: true
      }
    )
    return {
      addOtherMacroDef,
      addOtherMacroDefRef,
      otherMacroDef,
      addOtherMacroDefConfig,
      otherMacroDefConfig,
      dialogVisible,
      dataType,
      Edit,
      Delete,
      updateOtherMacroDef,
      removeOtherMacroDef,
      openDialog,
      closeDialog,
      handleConfirm
    }
  }
})
</script>

<style scoped></style>
